<template>
  <div class="about">
    <h1>透明度</h1>
    <div id="box" class="box" ref="box"></div>
  </div>
</template>
<script>
  import  funs  from '../../utils/animationUtil.js'
export default {
  name: 'test',
  mounted(){
    var box = this.$refs.box;
    box.addEventListener('mouseover',()=>{
        funs.opacityAnimation(box, 100)
    })
    box.addEventListener('mouseout',()=>{
        funs.opacityAnimation(box, 30)
    })
  
  },
  methods:{

  }
}
</script>
<style scoped>
#box {
  width: 200px;
  height: 200px;
  background: lightpink;
  opacity: 0.3;
  filter: alpha(opacity: 30);
}
</style>
